<template> <!-- 匹配中 -->
	<view class="wrap">
		<view class="layout-music flex justify-end">
			<view class="text m-right-30">背景音乐</view>
			<u-switch v-model="switchValue" size="32" @change="musicDo"></u-switch>
			<!-- activeColor="#4395f9" -->
		</view>
		<view class="wait">

			<image class="full" :src="url" mode=""></image>
			<view class="text">匹 配 中......</view>

			<view class="tips">
				<view style="text-align: center;width: 100%;">注:只有匹配对战才能上排行榜哦~</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as GameApi from '@/api/dati/game'
	import * as UserApi from '@/api/user'
	export default {
		data() {
			return {
				switchValue: true,
				is_play: true,
				audio: null,
				audio_url: '',
				userInfo: {},
				timer: null,
				url: 'https://xiaolanghua.zhanyuankj.cn/static/wait.gif',
				gameId: 0
			};
		},
		onUnload() {
			console.log(45)
			if (this.audio) {
				this.audio.stop();
			}
			this.logoutGame()
			clearInterval(this.timer);
		},
		onHide() {
			if (this.audio) {
				this.audio.stop();
			}
			this.logoutGame()
			clearInterval(this.timer);
		},
		onShow() {
			this.getUserInfo()

			this.handInit()
		},
		methods: {
			musicDo(e) {
				console.log(e)
				if (e == false) {
					this.audio.stop();
				} else {
					if (!this.audio) {
						var audio_url = this.audio_url
						this.skvido(audio_url)
					} else {
						this.audio.play();
					}

				}
			},
			logoutGame() {
				if (this.gameId > 0) {
					GameApi.logout(this.gameId)
						.then(result => {

						})
				}

			},
			getUserInfo() {
				UserApi.info()
					.then(result => {
						this.userInfo = result.data.userInfo
						this.audio_url = result.data.userInfo.audio_url

						if (result.data.userInfo.is_music) {
							this.skvido(result.data.userInfo.audio_url)
							this.switchValue = true

						} else {
							this.switchValue = false
						}
						this.isLoading = false


					})
			},
			skvido(audio_url) {

				console.log(556)
				// 创建音频对象
				this.audio = uni.createInnerAudioContext();



				// 设置音频源
				//this.audio.src = 'https://safe.gxgyl.com/uploads/bg.mp3';
				this.audio.src = audio_url;



				// 播放音频
				this.audio.play();
				this.is_play = true

				// 监听音频播放完成事件
				this.audio.onEnded(() => {
					//this.is_play = false
					this.skvido(audio_url)
					console.log('音频播放完成');
				});

				// 监听音频播放错误事件
				this.audio.onError((err) => {
					console.log('音频播放错误', err);
				});
				return
				let _this = this;
				plugin.textToSpeech({
					lang: "zh_CN",
					tts: true,
					content: _this.timu_title,
					success: function(res) {
						console.log("succ tts", res.filename)

						let music = null;
						music = uni.createInnerAudioContext(); //创建播放器对象
						music.src = res.filename;
						music.play(); //执行播放
						music.onEnded(() => {

							//播放结束
							//_this.is_play = false
							//music = null;
						});
					},
					fail: function(res) {
						// console.log("fail tts", res)
					}
				})
			},

			handInit() {
				const that = this

				// 开始倒计时
				this.countdown = 60;
				this.timer = setInterval(() => {
					this.countdown--;
					console.log(this.countdown)

					// GameApi.add().then(result => {
					// 	this.gameId = result.data.data.game_id
					// 	if (result.data.data.status == 1) {
					// 		// uni.showToast({
					// 		// 	title: '匹配成功',
					// 		// 	icon: 'none'
					// 		// })
					// 		console.log('成功')
					// 		clearInterval(this.timer);

					// 		that.$u.route({
					// 			url: 'pagesNew/battle/room?gameId=' + result.data.data.game_id,
					// 			type: 'redirectTo',
					// 		})
					// 	}
						
					// }).catch(err => {
					// 	clearInterval(this.timer);
					// 	setTimeout(() => {
					// 		uni.navigateBack()
					// 	}, 1000)
					// 	console.log(5555)
					// })
					
					if (this.countdown == 58) {
						console.log('机器人')
						//机器人
						GameApi.robotAdd(this.gameId).then(result => {
							this.gameId=result.data.data.game_id
							if (result.data.data.status == 1) {
								console.log('成功')
								clearInterval(this.timer);

								that.$u.route({
									url: 'pagesNew/battle/room?gameId=' + this.gameId,
									type: 'redirectTo',
								})
							}
						})
					}
					if (this.countdown === 0) {
						uni.showToast({
							title: '请稍后再试',
							icon: 'none'
						})
						uni.navigateBack()
						clearInterval(this.timer);
					}
				}, 1000);


			},
		},
		onLoad() {


		}
	}
</script>

<style lang="scss">
	.layout-music {
		padding: 20rpx 36rpx;

		.text {
			font-size: 36rpx;
			line-height: 38rpx;
			color: #101010;
		}

	}

	.page {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.wait {
		position: fixed;
		top: 50%;
		z-index: 99;
		margin-top: -475rpx;
		width: 750rpx;
		height: 750rpx;

		.text {
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 9;
			transform: translate(-50%, -50%);
			font-size: 48rpx;
			color: #000;
		}

		.tips {
			position: absolute;
			width: 100%;
			left: 50%;
			top: 850rpx;
			z-index: 9;
			transform: translate(-50%, -50%);
			font-size: 28rpx;
			color: #ff0000;
		}
	}

	/* 定义旋转动画 */
	@keyframes rotate {

		// 0% { transform: rotate(0deg); } /* 初始状态为不旋转 */
		// 100% { transform: rotate(360deg); } /* 结束状态为完全旋转一周（360度）*/
		0% {
			transform: rotate(0deg);
		}

		/* 初始状态为不旋转 */
		100% {
			transform: rotate(-360deg);
		}

		/* 结束状态返回原点 */
	}

	/* 应用旋转动画到元素上 */
	// .wait {
	//   animation-name: rotate; /* 指定要应用的动画名称 */
	//   animation-duration: 2s; /* 设置动画持续时间 */
	//   animation-iteration-count: infinite; /* 无限次重复播放动画 */
	//   animation-timing-function: linear; /* 线性过渡效果 */
	// }
</style>